<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>留言页面</title>
		<link rel="stylesheet" href="css/style.css" type="text/css"/>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script src="js/jquery-ui.min.js"></script>
		<script>
			//隐藏留言列表
			$(function(){
				$('#messageContent').on('focus',function(){
					$('.message').toggle('blind',500)
				})
				$('#messageContent').on('focus',function(){
					setTimeout(function(){
						$("textarea").animate({
							height:'200px'
						},300);
					},500)
				})
				//显示留言列表
					$('#sendMessage').on('click',function(){
						//百叶窗效果
						$('.message').toggle('blind',500)
					})
					//将输入框的高度变为80px
					$('#sendMessage').on('click',function(){
						//输入框高度还原
						$('textarea').animate({
							height:'80px'
						},300);
					})
					//显示留言内容,并清空输入框
					$('#sendMessage').on('click',function(){
						var $html="<li><div class='content'>"
						+$('#messageContent').val()
						+"</div></li>"
						if($('#messageContent').val()!=''){
							setTimeout(function(){
								//显示评论列表第一行
								$('.message').prepend($html);
								//当内容为空时,不能添加到留言区域
								$('textarea').val();
							},1000)
						}
					})
				})
		</script>
	</head>
	<body>
		<div id="wrapper">
			<!-- 留言显示区域 -->
			<div class="comments">
				<!-- 留言列表区 -->
				<ul class="message">
					<li>
						<p class="content">xxxxx</p>
					</li>
					<li>
						<p class="content">xxxxx</p>
					</li>
					<li>
						<p class="content">xxxxx</p>
					</li>
					<li>
						<p class="content">xxxxx</p>
					</li>
				</ul>
				<!-- 留言发布区 -->
				<div class="sendMessageWarp">
					<!-- 留言输入框 -->
					<textarea placeholder="输入留言内容..." id="messageContent"></textarea>
					<!-- “发布留言”按钮 -->
					<button id="sendMessage">发布留言</button>
				</div>
			</div>
		</div>
	</body>
</html>
